<template>
    <div class="formSearch">
        <div class="searchContent" :class="{hidePadding:showFormGroup.length === 0}">
            <el-form :model="formDataList.searchForm" label-width="120px" size="mini">
                <el-form-item :label="item.name" v-for="(item,index) in showFormGroup" :key='item.name' style='width:33%'
                    :class="{hideSheet:index > 2 && !isCollapse}">
                    <component :is="item.key" :label='item' :placeholder='item.placeholder' :comData='item'
                        @setFormData='setFormData' ref='component'></component>
                </el-form-item>
            </el-form>

            <div class="btn" style="flex:2;padding-left:20px">
                <div style="display:flex">
                    <my-button type="primary" icon="el-icon-search" size="mini" v-throttle:200='selectData'
                        :disabled="showFormGroup.length === 0">查询
                    </my-button>
                    <el-button type="text" size="mini" style='color:rgb(140, 140, 140)' @click='reset'
                        v-if='formDataList.reset'>重 置</el-button>

                    <!-- 列配置表单 -->
                    <form-configuration :disposeGroup='disposeGroup' @handleChangeDiposeGroup='handleChangeDiposeGroup'
                        v-if="formDataList.type"></form-configuration>
                </div>
            </div>
        </div>
        <div :class="['arrow',isCollapse ? 'el-icon-arrow-up' : 'el-icon-arrow-down']" @click="isCollapse = !isCollapse"
            v-if="formDataList.formSet && showFormGroup.length > 3">
        </div>
    </div>
</template>

<script>
    import input from './input.vue'
    import inputNumber from './inputNumber.vue'
    import checkInput from './checkInput'
    import datePicker from './checkInput/datePicker.vue'
    import searchInput from './searchInput.vue'
    import formSelect from './formSelect.vue'
    import formConfiguration from './formConfiguration.vue'
    import {
        searchCondition
    } from '@/api/baseController'
    export default {
        data() {
            return {
                isCollapse: false,
                disposeGroup: [],
                cloneGroup: [],
                enumCustomField: {
                    ipt: {
                        placeholder: '请输入',
                        key: 'srk'
                    },
                    inputNumber: {
                        placeholder: '',
                        key: 'jsk'
                    },
                    datePicker: {
                        placeholder: '',
                        key: 'cki'
                    },
                    selectChecked: {
                        placeholder: '请选择',
                        key: 'sel'
                    },
                    relevanceObject: {
                        placeholder: '请选择',
                        key: 'sel'
                    },
                    selectRadio: {
                        placeholder: '请选择',
                        key: 'sel'
                    },
                }
            }
        },
        props: {
            formDataList: {
                type: Object,
                default: () => ({})
            }
        },
        components: {
            // srk: 普通input输入框; jsk: 计数器; cki: 计划开始/结束时间; dpi: 实际开始/结束时间; sel: 基础多选/单选; sci: 远程搜索
            srk: input,
            jsk: inputNumber,
            cki: checkInput,
            dpi: datePicker,
            sci: searchInput,
            sel: formSelect,
            formConfiguration
        },
        computed:{
            showFormGroup(){
                return this.formDataList.formGroup
            }
        },
        mounted() {
            const { type } = this.formDataList
            /**
             * 先深拷贝一份默认表单数据,后续过滤数据需要用到最原始的默认项
             * 使用计算属性预加载默认表单数据,不会有表单项先空白的效果
             * 等接口响应完成依赖属性发生了变化重新计算formGroup
             */
            this.cloneGroup = JSON.parse(JSON.stringify(this.formDataList.formGroup))
            type && this.getSearchCondition({type})
        },
        methods: {
            //记录用户工单的状态选择
            getSearchCache(res) {
                this.$refs.component.find(dom => {
                    if (dom.comData !== undefined) {
                        const {
                            comData
                        } = dom
                        if (comData.cache && comData.cache === 'cacheState') {
                            dom.changeCache(res)
                        }
                    }
                })
            },
            // 自定义表单项
            getSearchCondition(data) {
                searchCondition(data).then(res => {
                    if (res.code == 200) {
                        //存放含有自定义字段的数据
                        let customFieldList = []
                        //获取已勾选的列配置数据列表key
                        let showGroupKey = []
                        //表单列配置
                        this.disposeGroup = []
                        res.data.forEach(item => {
                            //获取列配置列表
                            this.disposeGroup.push({
                                label: item.name,
                                name: item.name,
                                state: item.flag
                            })
                            if(!item.flag) return
                            if (item.customFieldMess !== null && Object.keys(item.customFieldMess).length > 0) {
                                customFieldList.push(item)
                            }else{
                                showGroupKey.push(item.name)
                            }
                        })
                        //加工自定义字段数据 (图片--关联属性--附件不展示)
                        customFieldList = customFieldList.map(i => {
                            let node = {}
                            let checkbox = []
                            if (i.customFieldMess.fieldType == 'selectChecked' || i.customFieldMess
                                .fieldType == 'selectRadio') {
                                checkbox = JSON.parse(i.customFieldMess.checkBox)
                                node.default = i.customFieldMess.fieldType == 'selectChecked' ? [] : ''
                                node.isRadio = i.customFieldMess.fieldType != 'selectChecked' //取反
                                node.options = checkbox.map(k => {
                                    return {
                                        label: k.value,
                                        value: k.value
                                    }
                                })
                            } else if (i.customFieldMess.fieldType == 'relevanceObject') {
                                let options = []
                                node.default = []
                                node.isRadio = false
                                for (const key in i.businessObject) {
                                    options.push({
                                        value:i.businessObject[key],
                                        label:i.businessObject[key]
                                    })
                                }
                                node.options = options
                            }
                            return {
                                label: i.customFieldMess.id,
                                name: i.name,
                                placeholder: this.enumCustomField[i.customFieldMess.fieldType]
                                    .placeholder,
                                key: this.enumCustomField[i.customFieldMess.fieldType].key,
                                node
                            }
                        })
                        const result = this.cloneGroup.filter(i => showGroupKey.includes(i.name))
                        this.formDataList.formGroup = [...result,...customFieldList]
                    }
                })
            },
            // 点击查询按钮
            selectData() {
                let obj = {
                    customFieldSearch: {}
                }
                delete this.formDataList.searchForm['customFieldSearch']
                let data = JSON.parse(JSON.stringify(this.formDataList.searchForm))
                for (const key in data) {
                    if (data[key] === undefined || data[key].length == 0) {
                        delete data[key]
                    }
                }
                if (
                    this.formDataList.type == 'workOrder' ||
                    this.formDataList.type == 'mission' ||
                    this.formDataList.type == 'stockBalance' ||
                    this.formDataList.type == 'productForm' ||
                    this.formDataList.type == 'meritPay'
                ) {
                    this.$emit('getFormData', data)
                } else {
                    for (let key in data) {
                        if (key != Number(key)) {
                            obj[key] = data[key]
                        } else if (key == Number(key)) {
                            if (Array.isArray(data[key])) {
                                obj.customFieldSearch[key] = data[key].join(',')
                            } else {
                                obj.customFieldSearch[key] = data[key]
                            }
                        }
                    }
                    if (!this.formDataList.type) {
                        delete obj['customFieldSearch']
                    }
                    this.$emit('getFormData', obj)
                }
            },
            getValue() {
                let data = JSON.parse(JSON.stringify(this.formDataList.searchForm))
                for (const key in data) {
                    if (data[key] == undefined || data[key].length == 0) {
                        delete data[key]
                    }
                }
                return data
            },
            //重置
            reset() {
                this.$refs.component.forEach(c => c.reset())
            },
            setFormData(val) {
                for (const key in val) {
                    this.formDataList.searchForm[key] = val[key]
                }
            },
            handleChangeDiposeGroup(disposeGroup) {
                let modelList = []
                modelList = disposeGroup.map(i => {
                    return {
                        name: i.name,
                        flag: i.state
                    }
                })
                this.getSearchCondition({
                    type: this.formDataList.type,
                    modelList
                })
            }
        },
    }
</script>

<style lang="less" scoped>
    .formSearch {
        position: relative;
        padding: 20px 20px 0;

        .searchContent {
            border-bottom: 1px solid #e8e8e8;
            display: flex;

            .el-form {
                display: flex;
                flex-wrap: wrap;
                flex: 22;

                .hideSheet {
                    display: none;
                }
            }

            .btn {
                >div {
                    justify-content: center;
                }

                button:nth-child(1) {
                    margin-right: 10px;
                }
            }
        }

        .hidePadding{
            padding-bottom: 17px;
        }

        .arrow {
            position: absolute;
            left: 50%;
            bottom: -14px;
            transform: translate(-50%, -50%);
            width: 40px;
            border: 1px solid #e8e8e8;
            border-radius: 18px;
            height: 14px;
            background: #fff;
            cursor: pointer;
            text-align: center;
            line-height: 11px;
            font-size: 12px;
        }

        ::v-deep .el-range-editor.el-input__inner {
            width: 100%;
        }

        ::v-deep .el-range-editor .el-range-input {
            flex: 3;
        }

        ::v-deep .el-date-editor .el-range-separator {
            flex: 1;
        }

        ::v-deep .el-select {
            width: 100%;
        }

        ::v-deep .el-autocomplete {
            width: 100%;
        }

        ::v-deep .el-form-item__label {
            font-size: 12px;
            color: rgba(0, 0, 0, .85);
        }
    }
</style>